import {
  ApiOutlined,
  AppstoreOutlined,
  ChromeOutlined,
  ConsoleSqlOutlined,
  DeleteOutlined,
  DownOutlined,
  DropboxOutlined,
  EditOutlined,
  GoogleOutlined,
  GroupOutlined,
  IeOutlined,
  JavaScriptOutlined,
  MailOutlined,
  MenuOutlined,
  MoreOutlined,
  
  SettingOutlined,
  WindowsOutlined,
} from "@ant-design/icons";
import {
  Button,
  Card,
  Col,
  Dropdown,
  Empty,
  Layout,
  Menu,
  MenuProps,
  Row,
  Space,
  Spin,
  message,
} from "antd";
import React from "react";
import { PlusOutlined } from "@ant-design/icons";
import { ProCard, ProLayout } from "@ant-design/pro-components";
import { useRequest } from "ahooks";
import {
  createApi,
  queryApiGroup,
  querySiteMenu,
  saveSiteMenu,
} from "../../../../api";
import { Outlet, useNavigate, useParams } from "react-router-dom";
import SaveGroupMenu from "./components/SaveGroupMenu";
import { defaultSchema } from "../../../../lowCode/core/defaultSchema";

const App = () => {
  const urlParams = useParams();

  const { data, loading, refresh } = useRequest<any, any>(
    () => querySiteMenu(urlParams),
    {}
  );
  const nav = useNavigate();
  const formatResult = (data: any) => {
    if (!data) {
      return [];
    }
    const newArr = data.map((item) => {
      // 创建一个新的对象来存储当前元素的处理结果
      const newItem: any = {}; // 使用展开运算符复制原始对象

      // 如果当前元素有 value 属性且是数字，将其乘以2
      // if (newItem.hasOwnProperty('value') && typeof newItem.value === 'number') {
      //   newItem.value *= 2;
      // }
      newItem.label = item.name;
      newItem.key = item.id;
      if(item.icon){
        newItem.icon = <img style={{width:15,height:15}} src={item.icon}/>
      }else{
        if (item.type === 1) {
          // if (!newItem.icon) {
          newItem.icon = <MenuOutlined />;
          // }
        } else if (item.type === 2) {
          newItem.icon = <ChromeOutlined />;
        }
      }
      // newItem.icon = item.icon;

     

      newItem.item = item;
      // 如果当前元素有 children 属性且是数组，递归处理 children
      if (item.type === 1 && Array.isArray(item.children)) {
        newItem.children = formatResult(item.children);
      } else {
        delete newItem.children;
      }

      return newItem;
    });
    return newArr; // 返回处理后的新数组

    // const res: any[] = [];
    // for (let i = 0; i < data.length; i++) {
    //   data[i].label = data[i].name;
    //   data[i].key = data[i].id;
    //   data[i].icon = <ApiOutlined />;
    //   let children: any[] = [];
    //   res.push({
    //     key: data[i].id,
    //     label: data[i].name,
    //     item: data[i],
    //     children,
    //   });

    //   for (let k = 0; k < data[i].children.length; k++) {
    //     // children[k].label = data[i].children[k].name;
    //     // children[k].key = data[i].children[k].id;
    //     // children[k].item =  data[i].children[k]
    //     children.push({
    //       label: data[i].children[k].name,
    //       key: data[i].children[k].id,
    //     });
    //   }
    // }
    // console.log("resres", res);
    // return res;
  };
  const addPage = async (item) => {
    console.log("itemitem", item);
    await saveSiteMenu({
      name: `newPage`,
      path: `/page/${+new Date()}`,
      type: 2,
      schema: defaultSchema,
      parentId: item.id,
      siteId: urlParams.siteId,
    });
    message.success("添加成功");
    refresh();
  };
  const items: MenuProps["items"] = [
    {
      key: "1",
      icon: <GroupOutlined />,
      label: (
        <SaveGroupMenu
          refresh={refresh}
          payload={{
            siteId: urlParams.siteId,
            type: 1,
            parentId: 0,
          }}
        >
          <a>分组</a>
        </SaveGroupMenu>
      ),
    },
    {
      type: "divider",
    },
    {
      key: "2",
      icon: <ChromeOutlined />,
      onClick: () => addPage({ id: 0 }),
      label: <a rel="noopener noreferrer">页面</a>,
    },
  ];
  return (
    <Layout style={{ height: "100%" }}>
      <Layout.Sider width={250} style={{ marginRight: 10 }}>
        <ProCard
          style={{ height: "100%" }}
          ghost
          headerBordered
          title={
            <Space>
              <DropboxOutlined />
              菜单
            </Space>
          }
          extra={
            <Dropdown menu={{ items }}>
              <a onClick={(e) => e.preventDefault()}>
                <Space>
                  添加
                  <DownOutlined />
                </Space>
              </a>
            </Dropdown>
          }
          size="small"
          // actions={[
          //   <SaveGroupMenu payload={{}}>
          //     <Button type="link">添加分组</Button>
          //   </SaveGroupMenu>,
          //   <Button type="link">添加页面</Button>,
          // ]}
          // title="左侧详情"
          colSpan="20%"
        >
          {loading ? (
            <Spin />
          ) : !data ? (
            <Empty />
          ) : (
            <Menu
              style={{ height: "100%" }}
              theme="light"
              itemIcon={() => <DeleteOutlined style={{ color: "#fd8585" }} />}
              onClick={(e) => {
                nav(`/siteManage/${urlParams.siteId}/menu/${e.key}`);
              }}
              expandIcon={(e2: any) => {
                if (!e2) {
                  return;
                }
                const item = e2 ? e2.item : {};
                return (
                  <div
                    onClick={(e) => {
                      // console.log("eeee", e, e2);
                      e.stopPropagation();
                    }}
                  >
                    <Dropdown
                      menu={{
                        itemIcon: false,
                        items: [
                          {
                            label: "添加页面菜单",
                            onClick: () => addPage(item),
                            icon: <ChromeOutlined />,
                            key: "000",
                          },
                          {
                            label: (
                              <SaveGroupMenu
                                refresh={refresh}
                                payload={{
                                  name: "",
                                  type: 1,
                                  siteId: urlParams.siteId,
                                  path: "",
                                  parentId: item.id,
                                }}
                              >
                                添加菜单分组
                              </SaveGroupMenu>
                            ),
                            icon: <GroupOutlined />,
                            key: "22",
                          },
                          {
                            type: "divider",
                          },
                          {
                            label: (
                              <SaveGroupMenu refresh={refresh} payload={item}>
                                编辑菜单分组
                              </SaveGroupMenu>
                            ),
                            icon: <EditOutlined />,
                            key: "223",
                          },
                          {
                            type: "divider",
                          },
                          //   {
                          //     label: (
                          //       <SaveApiGroup refresh={refresh} payload={e2}>
                          //         <span>编辑分组</span>
                          //       </SaveApiGroup>
                          //     ),
                          //     icon: <EditOutlined />,
                          //     key: "11",
                          //   },
                          {
                            type: "divider",
                          },
                          {
                            label: "删除",
                            danger: true,
                            icon: <DeleteOutlined />,
                            key: "33",
                          },
                        ],
                      }}
                    >
                      <a onClick={(e) => e.preventDefault()}>
                        <MoreOutlined />
                      </a>
                    </Dropdown>
                  </div>
                );
              }}
              mode="inline"
              items={formatResult(data)}
            />
          )}
        </ProCard>
      </Layout.Sider>
      <Layout.Content>
        <Outlet context={{ refresh }} />
      </Layout.Content>
    </Layout>

    //   <Layout>
    //     <Layout.Sider width={250}>
    //       <Card
    //       size="small"
    //       actions={[<a type="link">添加分组</a>,<a type="link">添加页面</a>]}
    //         bordered
    //         title={
    //           <span>
    //             {" "}
    //             <MenuOutlined  style={{ marginRight: 10 }} />
    //             站点菜单
    //           </span>
    //         }
    //         extra={
    //         //   <SaveApiGroup refresh={refresh}>
    //             <a type="link">添加分组</a>
    //         //   </SaveApiGroup>
    //         }
    //         styles={{
    //           body: {
    //             padding: 0,
    //           },
    //         }}
    //       >
    //         <Menu
    //           theme="light"

    //           itemIcon={() => <DeleteOutlined />}
    //           onClick={(e) => {
    //             nav(`/project/${urlParams.projectId}/api/${e.key}`);
    //           }}
    //           expandIcon={(e2) => {
    //             return (
    //               <div
    //                 onClick={(e) => {
    //                   // console.log("eeee", e, e2);
    //                   e.stopPropagation();
    //                 }}
    //               >
    //                 <Dropdown
    //                   menu={{
    //                     itemIcon: false,
    //                     items: [
    //                       {
    //                         label: "添加API接口(JS)",
    //                         onClick: () => onAddJsApi(e2),
    //                         icon: <JavaScriptOutlined />,

    //                         key: "000",
    //                       },
    //                       {
    //                         label: "添加API接口(SQL)",
    //                         icon: <ConsoleSqlOutlined />,
    //                         key: "22",
    //                       },
    //                       {
    //                         type: "divider",
    //                       },
    //                     //   {
    //                     //     label: (
    //                     //       <SaveApiGroup refresh={refresh} payload={e2}>
    //                     //         <span>编辑分组</span>
    //                     //       </SaveApiGroup>
    //                     //     ),
    //                     //     icon: <EditOutlined />,
    //                     //     key: "11",
    //                     //   },
    //                       {
    //                         type: "divider",
    //                       },
    //                       {
    //                         label: "删除",
    //                         danger: true,
    //                         icon: <DeleteOutlined />,
    //                         key: "33",
    //                       },
    //                     ],
    //                   }}
    //                 >
    //                   <a onClick={(e) => e.preventDefault()}>
    //                     <MoreOutlined />
    //                   </a>
    //                 </Dropdown>
    //               </div>
    //             );
    //           }}
    //           // expandIcon={false}
    //           defaultSelectedKeys={["1"]}
    //           defaultOpenKeys={["sub1"]}
    //           mode="inline"
    //           items={formatResult(data)}
    //         />
    //       </Card>
    //     </Layout.Sider>
    //     <Layout.Content style={{ marginLeft: 10 }}>
    //       <Outlet context={{ refresh }} />
    //     </Layout.Content>
    //   </Layout>
  );
};
export default App;
